<template>
	<div class="RoleListDiv">
		<div class="RoleListTitle">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<router-link class="bold" to="/home">首页</router-link>&nbsp;
					</li>

					<li class="breadcrumb-item">权限管理&nbsp;</li>
					<li class="breadcrumb-item active" aria-current="page">角色列表</li>
				</ol>
			</nav>
		</div>
		<div class="RoleListBody">
			<div class="RoleListBody-top">
				<div class="inpbtn el-col-3">
					<el-button type="primary" @click="centerDialogVisible = true">添加用户</el-button>
				</div>
				<el-dialog title="添加角色" :visible.sync="centerDialogVisible" width="40%">
					<div class="alterUser">
						<el-form label-width="80px">
							<el-form-item label="角色名" required>
								<el-input prefix-icon="el-icon-user" v-model="roleName">
								</el-input>
							</el-form-item>
						</el-form>
						<el-form label-width="80px">
							<el-form-item label="角色描述" required>
								<el-input prefix-icon="el-icon-setting" v-model="roleDesc">
								</el-input>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="btn">确 定</el-button>
					</div>
				</el-dialog>
			</div>
			<div class="RoleListBody-bot">
				<el-table :data="ListData" stripe border style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="">

						</template>
					</el-table-column>
					<el-table-column prop="num" label="" width="44">
					</el-table-column>
					<el-table-column prop="roleName" label="角色名" width="622">
					</el-table-column>
					<el-table-column prop="roleDesc" label="角色描述" width="622">
					</el-table-column>
					<el-table-column prop="role" label="操作" width="287">
						<template slot-scope="scope">
							<el-button type="primary" @click="btn1(scope.row)">编辑</el-button>
							<el-button type="danger" @click="del(scope.row)">删除</el-button>
							<el-button type="warning" @click="allot(scope.row)">分配权限</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog title="修改角色" :visible.sync="centerDialogVisible1" width="40%">
					<div class="alterUser">
						<el-form label-width="80px">
							<el-form-item label="角色名" required>
								<el-input prefix-icon="el-icon-user" v-model="roleNameEmit">
								</el-input>
							</el-form-item>
						</el-form>
						<el-form label-width="80px">
							<el-form-item label="角色描述" required>
								<el-input prefix-icon="el-icon-setting" v-model="roleDescEmit">
								</el-input>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible1 = false">取 消</el-button>
						<el-button type="primary" @click="btn2">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="分配角色" :visible.sync="centerDialogVisible2" width="40%">
					<div class="allot">


					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
import user from "@/api/user.js";
export default {
	data() {
		return {
			ListData: [],
			centerDialogVisible: false,
			centerDialogVisible1: false,
			centerDialogVisible2: false,
			input: '',
			roleName: '',
			roleNameEmit: '',
			emitId: '',
			delId: '',
			roleDesc: '',
			roleDescEmit: '',
			tableData: [
				{
					id: '12987122',
					name: '好滋好味鸡蛋仔',
					category: '江浙小吃、小吃零食',
					desc: '荷兰优质淡奶，奶香浓而不腻',
					address: '上海市普陀区真北路',
					shop: '王小虎夫妻店',
					shopId: '10333'
				}
			],

		}
	},
	methods: {
		btn() {
			let _this = this;
			let obj = {
				roleName1: _this.roleName,
				roleDesc1: _this.roleDesc
			}

			this.centerDialogVisible = false
			user.addRoles(obj).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);
				user.RoleListData().then((res) => {
					_this.ListData = res.data.data;
					console.log(_this.ListData);
				})
			})
			_this.roleName = '';
			_this.roleDesc = '';
		},
		btn1(val) {
			console.log(val);
			this.centerDialogVisible1 = true;
			this.roleNameEmit = val.roleName;
			this.roleDescEmit = val.roleDesc;
			this.emitId = val.id;

		},
		btn2() {
			let _this = this;
			this.centerDialogVisible1 = false
			let obj = {
				id: _this.emitId,
				emailEmit: _this.roleNameEmit,
				mobileEmit: _this.roleDescEmit
			}
			user.emitRoles(obj).then((res) => {
				_this.ListData = res.data.data;
				console.log(res);
				user.RoleListData().then((res) => {
					_this.ListData = res.data.data;
				})
			})
		},
		allot() {
			this.centerDialogVisible2 = true;
		},
		del(val) {
			this.delId = val.id;
			console.log(this.delId);
			let _this = this;

			user.delRoles(this.delId).then((res) => {
				console.log(res);
				user.RoleListData().then((res) => {
					_this.ListData = res.data.data;
					console.log(_this.ListData);
				})
			})

		}
	},

	mounted() {
		let _this = this;
		user.RoleListData().then((res) => {
			_this.ListData = res.data.data;
			console.log(_this.ListData);

		})
	},
}
</script>

<style lang="scss">
ul,
ol {
	list-style: none;

}

.bold {
	font-weight: bold;
}

a {
	text-decoration: none;
	color: #000;
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	color: #6c757d;
	content: "/";
}

.demo-table-expand {
	font-size: 0;
}

.demo-table-expand label {
	width: 90px;
	color: #99a9bf;
}

.demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}

li {
	float: left;
}

.RoleListDiv {
	width: 96.96%;
	height: 96.96%;
	padding: 1.52%;

	.RoleListTitle {
		width: 100%;
		height: 20px;
		line-height: 1;
		font-size: 14px;
	}

	.RoleListBody {
		margin-top: 10px;
		padding: 20px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		color: #303133;

		.RoleListBody-top {
			width: 100%;
			height: 40px;

			.inpDiv {
				// padding-left: 5px;
				// padding-right: 5px;
			}

			.inpbtn {}
		}

		.RoleListBody-bot {
			margin-top: 10px;
		}
	}
}
</style>